<template>
  <div class="app-container">
    <!-- 工具栏 -->
    <div class="head-container">
      <crudOperation :permissions="permission"></crudOperation>
    </div>
    <!-- 表格渲染 -->
    <el-table
      ref="table"
      v-loading="crud.loading" 
      :data="crud.data"
    >
      <el-table-column v-if="columns.visible('name')" label="用法名称" prop="name"></el-table-column>
      <el-table-column v-if="columns.visible('status')" label="有效标志" prop="status">
        <template v-slot="slot">
          <template v-if="slot.row.status === 0">正常</template>
          <template v-if="slot.row.status === 1">无效</template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <template v-if="scope.row.type === 2">
            <udOperation
              :data="scope.row"
              :permissions="permission"
            />
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增、编辑用法 -->
    <useForm></useForm>
  </div>
</template>

<script>
import CRUD, { presenter, header } from "@crud/crud";
import crudOperation from "@crud/CRUD.operation";
import udOperation from '@crud/UD.operation';
import { add,edit } from "@/api/system/use";
import useForm from "./module/form";

let defaultCrud = CRUD({
  crudMethod: { add,edit },
  url: "use/getList",
  pagination: false,
  method: 'post',
  title: "用法",
  query: {}
});

export default {
  name: "useSet",
  components: { crudOperation, useForm, udOperation },
  mixins: [presenter(defaultCrud), header()],
  data() {
    return {
      permission: [
        {
          type: "add",
          permission: ["admin","use:add"],
          position: 1
        },{
          type: "edit",
          permission: ["admin","use:edit"],
          position: 2
        }
      ]
    }
  }
}
</script>